<template>
    <div id="car-legend">
      <ul class="legend-list">
        <li v-for="item in legendData">
          <p class="legend-icon" v-bind:style="{ backgroundColor: item.color}"></p>
          <p class="legend-list-item-name" :style="{color: style === 1 ? '#fff' : '#000'}">{{item.name}}</p>
          <img :src="item.imgurl"/>
        </li>
      </ul>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        name: 'CarLegend',
        data () {
              return {
                legendData: [
                  {
                    color: '#5e6bc7',
                    imgurl: './static/images/car/lvyou.png',
                    name: '旅游包车'
                  },
                  {
                    color: 'rgb(52, 160, 142)',
                    imgurl: './static/images/car/banxian.png',
                    name: '班线客车'
                  },
                  {
                    color: 'rgb(77, 178, 47)',
                    imgurl: './static/images/car/gongjiao.png',
                    name: '公交车'
                  },
                  {
                    color: '#00afd7',
                    imgurl: './static/images/car/putong.png',
                    name: '普通货车'
                  },
                  {
                    color: 'rgb(205, 29, 23)',
                    imgurl: './static/images/car/weixian.png',
                    name: '危险货车'
                  },
                  {
                    color: '#389b34',
                    imgurl: './static/images/car/chuzu.png',
                    name: '出租车'
                  },
                ]
            }
        },
        mounted(){

        },
        computed: {
          ...mapGetters(['style'])
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";
    #car-legend {
      position: absolute;
      bottom: 0px;
      right: 380px;
      width: auto;
      min-height: 80px;
      pointer-events: auto;
    }
  .legend-list{
    list-style: none;
    margin: 0px;
    padding: 0px;
    height: auto;
    width:auto;
  }

  .legend-list li{
    float: right;
    margin: 0 6px;
    p{
      margin: 10px auto;
    }
    img{
      width: 24px;
      height: 44px;
    }
  }
  .legend-icon{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0 auto;
  }

  .legend-list-item-name{
    font-size: $font-normal;
    color: white;
  }
</style>
